<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #cont{width: 1000px;border: solid 1px black;overflow: hidden;margin: 0 auto;}
        #cont .box{width: 250px;text-align: center;border: solid 1px black;box-sizing: border-box;float: left;}
        .box img{width: 200px;}
        .box p{margin: 10px 0;}
        .box p:nth-child(3){line-height: 20px;height:40px;overflow: hidden;}
        .box span{padding: 0 10px;display: block;margin: 10px auto;width: 100px;height: 40px;line-height: 40px;text-align: center;background: cyan;cursor: pointer;}
        .box span:active{background: blue;color: #fff;}
    </style>
</head>
<body>
    <h1>这是商品列表，去<a href="cart.html">购物车</a></h1>
    <div id="cont">
        <p>卖完了，等待上架中...</p>
        <!-- <div class="box">
            <img src="https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg" alt="">
            <p>3999.00</p>
            <p>OPPO K7x 双模5G 4800万四摄 5000mAh长续航 90Hz电竞屏  黑镜6GB+128GB 30W闪充全网通</p>
            <span>加入购物车</span>
        </div> -->
    </div>
</body>
<script src="./data/goods.js"></script>
<script>
    
    class List{
        constructor(){
            this.cont = document.getElementById("cont");
            this.load()
            this.addEvent();
        }
        load(){
            ajax().then(data => {
                // console.log(data)
                this.data = JSON.parse(data)
                this.render();
            })
        }
        render(){
            let str = '';
            this.data.forEach(val => {
                str += `<div class="box" index="${val.proId}">
                        <img src="${val.proImg}" alt="">
                        <p>${val.price}</p>
                        <p>${val.proName}</p>
                        <span class="btn">加入购物车</span>
                    </div>`
            });
            this.cont.innerHTML = str
        }
        addEvent(){
            const that = this;
            this.cont.addEventListener("click", function(eve){
                if(eve.target.className === "btn"){
                    // console.log(eve.target.parentNode.getAttribute("index"))
                    that.id = eve.target.parentNode.getAttribute("index")
                    that.setData()
                }
            })
        }
        setData(){
            // [{},{},{},]
            // {
            //     id:"ajsgfaf",
            //     num:1
            // }
            const arr = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];

            if(arr.length > 0){
                // 不是第一次，判断商品新旧
                let i = 0;
                const onoff = arr.some((val,idx)=>{
                    i = idx;
                    // 当some的回调函数返回true时，立即结束，并返回true
                    return val.id === this.id
                })
                if(onoff){
                    // 找到了，旧，修改数量
                    arr[i].num++
                }else{
                    // 没有找到，新，直接加
                    arr.push({
                        id:this.id,
                        num:1
                    })
                }
            }else{
                // 第一次加入购物车，直接加
                arr.push({
                    id:this.id,
                    num:1
                })
            }
            localStorage.setItem("proData", JSON.stringify(arr))
        }
    }


    new List;




    function ajax(){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify(data))
            }, 500);
        })
    }
</script>
</html>